<template>
	<div id="box">
		<ul>
			<li class="monitor">
				<monitor></monitor>
			</li>
			<li class="contrastiveAnalysis">
				<contrastiveAnalysis></contrastiveAnalysis>
			</li>
			<li class="mainCities">
				<mainCities></mainCities>
			</li>
		</ul>
	</div>
</template>

<script>
	import { monitor, contrastiveAnalysis, mainCities } from '../index';
	export default {
		name: '',
		components: { monitor, contrastiveAnalysis, mainCities },
		props: ['list'],
		data() {
			return {};
		},
	};
</script>
<style scoped>
	#box {
		height: 100%;
		ul {
			height: 100%;
			display: flex;
			flex-direction: column;
			list-style: none;
			justify-content: flex-start;
			align-items: center;
			li {
				width: 90%;
				overflow: hidden;
			}
			.monitor {
				flex: 3;
			}
			.contrastiveAnalysis {
				flex: 4;
			}
			.mainCities {
				flex: 5;
			}
		}
	}
</style>
